import { Form, Input, Button } from 'antd';
import { history } from 'umi';
import request from '@/utils/request';
import styles from './style.less';

export default function IndexPage() {
  const [form] = Form.useForm();

  const register = () => {
    form.validateFields().then((value) => {
      request
        .post('/auth/register', value)
        .then((res: any) => {
          if (res.status === 200) {
            history.push('/login');
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    });
  };

  return (
    <div className={styles.box}>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        autoComplete="off"
      >
        <Form.Item
          label="email"
          name="email"
          rules={[
            { required: true, message: '请输入email' },
            {
              pattern:
                /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
              message: '请输入正确的email',
            },
          ]}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item
          label="username"
          name="username"
          rules={[
            { required: true, message: '请输入username' },
            {
              pattern: /^[a-zA-Z0-9]{5,20}$/,
              message: 'username必须是5-20位数字和字母组合',
            },
          ]}
        >
          <Input placeholder="请输入username" />
        </Form.Item>

        <Form.Item
          label="password"
          name="password"
          rules={[
            { required: true, message: '请输入password' },
            {
              pattern: /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{8,20}/,
              message:
                'password必须有大写字母小写字母数字和特殊符号，长度为8-20位',
            },
          ]}
        >
          <Input.Password placeholder="请输入password" />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
          <Button type="primary" style={{ width: '100%' }} onClick={register}>
            注册
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
